﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <title>角色管理</title>
        <meta name="renderer" content="webkit">
        <base th:href="@{/}"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="static/css/x-admin.css" media="all">
        <link rel="stylesheet" href="static/css/backstage.css" media="all">
        <script src="static/js/jquery.min.js"></script>
        <link src="static/lib/layui/css/layui.css"></link>
        <script src="static/lib/layui/layui.all.js"></script>
        <link rel="stylesheet" href="static/lib/layui/css/modules/laydate/laydate.css" media="all">
        <link rel="stylesheet" href="static/lib/layui/css/modules/layer/default/layer.css" media="all">
        <script>
                 $(function(){
        		      randerData();
        	       });
        	//渲染数据
        	function randerData(){
        		$("tbody").empty();
        		let s
                $.get("getSession",function(data){
                    s=data.t.roles.roleName
                })
        		$.ajax({
        			url:"admin/listRole",
        			dataType:"json",
        			cache:false,
        			success:function(data){
        			    alert(JSON.stringify(data.t))
        				var list=data.t;
        				var selfId=data.message;  //后台是通过这个message把当前登录用户的id传过来的

        				for(var i=0;i<list.length;i++){
        					let b=list[i]
        					alert(b);
        					let tr="<tr> <td >"+b.roleId+" </td> <td >"+b.roleName+"</td><td> "+b.currentTime+"</td>  "
        					tr+= "<td class='td-manage'>"
                            tr+= "<a title='配置权限' href='javascript:void(0)'  onclick='peizhi("+b.roleId+")' class='mlbtn' >查看和配置权限</a>"
                            if(s=="root") {
                                tr += "<a title='删除角色' href='javascript:void(0)'  onclick='deleteRole(" + b.roleId + ")' class='mlbtn' >删除角色</a>"
                            }$("#table").append(tr);
                            $("#table tr").attr("bgColor", "white");//为单数行表格设置背景颜色
                            $("#table tr:even").css("background-color", "#F2F2F2");//为双数行表格设置背颜色素
        				}
        			}
        		});
            }
        		$(".x-body").height($(document).height());
                 function deleteRole(id){
                     if(confirm("确定要删除该角色吗")==true){
                         $.ajax({
                             url:"admin/deleteRole",
                             data:{roleId:id},
                             async:false,
                             success:function(result){
                                 alert(result.message);
                                 randerData();
                             }
                         });
                     }
                 }
            function peizhi(id) {
                $("#div_auth").empty()
                $.ajax({
                 url: "admin/AuthList",
                 dataType: "json",
                 type: "post",
                 cache: false,
                 success: function (data) {
                     $.ajax({
                         url: "admin/searchAuth",
                         type: "post",
                         data: {id: id},
                         async: false,
                         success: function (result) {
                             var list = data.t;
                             var ckList = result.t;
                             alert(JSON.stringify(data.t.id))
                             alert(JSON.stringify(result.t))
                             for (var i = 0; i < list.length; i++) {
                                 let f = list[i];
                                 let tr = "";
                                 if (ckList.includes(f.id)) {
                                     tr = "&nbsp;&nbsp;<input type='checkbox' id='auth' name='authId' value='" + f.id +"'checked/>"+ f.authName;
                                 } else {
                                     tr = "&nbsp;&nbsp;<input type='checkbox' id='auth' name='authId' value='" + f.id + "'/>"+ f.authName;
                                 }
                                 tr += "<br/>"
                                 $("#div_auth").append(tr);
                             }
                         }
                     })
                        }
                     })
                layui.use("layer", function () {
                   var layer = layui.layer;
                   layer.open({
                     type: 1,
                     title: "请勾选权限",
                     content: $('#div_auth'),
                     btn: ['确定'],
                     yes: function (index, layero) {
                         var ids = [];
                         $("input[name='authId']:checked").each(function (i) {
                             ids.push($(this).val());
                         });
                         $.ajax({
                             url: "admin/upRoleAuth",
                             type: "post",
                             offset: 'auto',
                             data: {
                                 roleId: id,
                                 authIds: ids.toString()
                             },
                             success: function (data) {
                                 layer.alert(data.message, function () {
                                     location.reload();
                                 });
                                 layer.close(index)
                             }
                         });
                     }
                 });
             });
                 }
        	 
        </script>
    </head>
    <body>
      <div class="wrap">
        <div class="x-nav">
            <div class="title">
              <a><cite>系统权限管理</cite></a>
              <a href="admin/addrole" >新增角色</a>
            </div>

        </div>
        <div class="x-body">
            <table class="layui-table" id="table">
                <thead>
                    <tr>
                        <th> 角色Id </th>
                        <th> 角色名称</th>
                        <th> 角色更改时间 </th>
                        <th> 角色所有的权限</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
          <div  id="div_auth" style="display: none">

          </div>
      </div>

    </body>
</html>